<template>
    <div>

        <el-dialog title="" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="面试公司信息" :label-width="formLabelWidth">
                    <el-input v-model="form.company" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="面试时间" :label-width="formLabelWidth">
                    <el-col :span="8">
                        <el-date-picker type="date" placeholder="请选择面试时间" v-model="form.times"
                            style="width: 100%;"></el-date-picker>
                    </el-col>
                    <el-col class="line" :span="2">-</el-col>
                    <el-col :span="8">
                        <el-time-picker placeholder="选择时间" v-model="form.times" style="width: 100%;"></el-time-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="选择面试人" :label-width="formLabelWidth">
                    <el-select v-model="form.mid" placeholder="请选择面试人">
                        <el-option v-for="item in setUserList" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注" :label-width="formLabelWidth">
                    <el-input v-model="form.remark"></el-input>
                </el-form-item>
                <el-form-item label="面试反馈" :label-width="formLabelWidth">
                    <!-- <tinymce :height="300" v-model="content" id='tinymce'></tinymce> -->
                    <el-input type="textarea" v-model="form.callbackmsg"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="onQue(form)" v-if="!tian">添加</el-button>
                <el-button type="primary" @click="onQues(form)" v-if="xiu">修改</el-button>
            </div>
        </el-dialog>
        <el-select v-if="isSelect" v-model="value" placeholder="请选择" @change="change">
            <el-option v-for=" item  in  options " :key="item.cid" :label="`${item.bak}  ${item.name}`"
                :value="item.cid">
            </el-option>
        </el-select>
        <el-button type="success" @click="dialogFormVisible = true, tian = false, xiu = false">添加</el-button>
        <el-table v-if="isSelect" :data="teadData" style="width: 100%" border>
            <el-table-column fixed prop="nickname" label="姓名">
            </el-table-column>
            <el-table-column v-for="item in  timesdata" :label="item.field" width="120" :prop="item.field">
                <template v-slot:default="{ row, column }">
                    <div @click="onxiuGai(items)" v-for="items in row[column.property]">{{ items.value }}</div>
                </template>
            </el-table-column>
            <!-- <el-table-column fixed="right" label="操作" width="120">
                <template slot-scope="scope">
                    <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small">
                        移除
                    </el-button>
                </template>
            </el-table-column> -->
        </el-table>
    </div>
</template>


<script>

import { getCompany, getClassList, addCompany, getUserListApi, getCompanymianApi,editCompanyApi } from '@/api/mian'
import { convertTimestampToDate, convertDateToTimestamp, uniqueObjectArray, getHourMins } from './components/time.js'
export default {
    data() {
        return {
            content: '',
            value1: '',
            value2: '',
            isSelect: false,
            options: [],
            value: '',
            teadData: [],
            tableData: [],
            timesdata: [],
            dialogTableVisible: false,
            dialogFormVisible: false,
            form: {
                company: '',
                times: '',
                remark: '',
                callbackmsg: '',
                mid: '',
            },
            formLabelWidth: '120px',
            setUserList: [],
            datasNum: [],
            xiu: false,
            tian: false
        }
    },
    mounted() {
        this.userJiao()
        this.userList()
    },
    methods: {
        //点击确定修改按钮
        onQues(e) {
            console.log(e);
            this.dialogFormVisible = false
            console.log((new Date(e.times)).getTime());
            let id = JSON.parse(localStorage.getItem('userInfo')).id
            let obj = {
                id:e.id,
                mid: this.form.mid,
                company: e.company,
                times: (new Date(e.times)).getTime(),
                remark: e.remark,
                callbackmsg: e.callbackmsg,
            }
            editCompanyApi(obj).then(res => {
                if (res.code === 20000) {
                    this.$message('修改成功');
                    this.teadData = this.teadData
                }
            })
        },
        //修改
        onxiuGai(row) {
            this.xiu = true
            this.tian = true
            console.log(row);

            this.dialogFormVisible = true
            let obj = {}
            for (let i = 0; i < this.datasNum.length; i++) {
                if (this.datasNum[i].id === row.id) {
                    obj = this.datasNum[i]
                }
            }
            this.form = obj
        },
        //添加面试人
        userList() {
            getUserListApi({ pageIndex: 1, pageSize: 999, }).then(res => {
                if (res.code === 20000) {
                    let arr = []
                    for (let i = 0; i < res.data.list.length; i++) {
                        let obj = {}
                        if (res.data.list[i].username.indexOf('teacher') == -1) {
                            obj.value = res.data.list[i].id
                            obj.label = res.data.list[i].nickname
                            arr.push(obj)
                        }
                    }
                    this.setUserList = arr
                }
            })
        },
        //点击添加
        onQue(e) {
            this.dialogFormVisible = false
            console.log(this.from, e);
            let id = JSON.parse(localStorage.getItem('userInfo')).id
            let obj = {
                mid: id,
                company: e.company,
                times: (new Date(e.times)).getTime(),
                remark: e.remark,
                callbackmsg: e.callbackmsg,
            }
            addCompany(obj).then(res => {
                if (res.code === 1) {
                    this.$message('添加成功');
                }
                console.log(res);
            })
        },
        deleteRow(index, rows) {
            rows.splice(index, 1);
        },
        userJiao() {
            let { roles } = JSON.parse(localStorage.getItem('userInfo'))
            console.log(roles);
            if (roles === 'teacher') {
                this.isSelect = true
                let obj = { pageSize: 999, pageInedx: 1 }
                getClassList(obj).then(res => {
                    if (res.code === 20000) {
                        this.options = res.data.list
                        this.total = res.data.count
                    }
                })

            }
        },
        //获取表格数据
        change(id) {
            let obj = { cid: id }
            getCompany(obj).then(res => {
                if (res.code === 20000) {
                    let arr = []
                    console.log(res.data);
                    this.datasNum = res.data
                    for (let i = 0; i < res.data.length; i++) {
                        let obj = {}
                        arr.push({
                            field: convertTimestampToDate(res.data[i].times * 1),
                            label: convertDateToTimestamp(res.data[i].times * 1),
                        })
                    }
                    let objss = uniqueObjectArray(arr, 'field').sort((a, b) => a.field.localeCompare(b.field))
                    console.log(objss);
                    this.timesdata = objss
                    //数据拼接
                    let nameList = []
                    for (let i = 0; i < res.data.length; i++) {
                        let key = convertTimestampToDate(res.data[i].times * 1)
                        let flag = false
                        for (let j = 0; j < nameList.length; j++) {
                            if (nameList[j].nickname === res.data[i].nickname) {
                                if (!nameList[j][key]) {
                                    nameList[j][key] = []
                                }
                                nameList[j][key].push({
                                    id: res.data[i].id,
                                    value: res.data[i].company + `(${getHourMins(res.data[i].times * 1, ':')})`
                                })
                                flag = true
                            }
                        }
                        if (!flag) {
                            //数据添加
                            nameList.push({
                                nickname: res.data[i].nickname
                            })
                            let crr = []
                            crr.push({
                                id: res.data[i].id,
                                value: res.data[i].company + `(${getHourMins(res.data[i].times * 1)})`
                            })

                            nameList[nameList.length - 1][key] = crr
                        }
                    }
                    this.teadData = nameList
                    // this.timesdata = nameList
                }
            })
            getCompanymianApi(obj).then(res => {
                console.log(res);
            })
        }
    },
}



</script>